<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8" />
	<title>下拉树控件</title>

	<link	href="../jquery.combotree.css"  rel="stylesheet" type="text/css" class="view-source">
	<link  href="../../../../themes/default/style.css" class="view-source" rel="stylesheet">
	<script src="../../../../scripts/jquery.js"  class="view-source" type="text/javascript"></script>
	<script src="../../../../scripts/common.js"  class="view-source" type="text/javascript"></script>
	<script src="../../../../scripts/browserfix.js"  class="view-source" type="text/javascript" ></script>
	<script src="../../../../scripts/plugins/jquery.json.js" type="text/javascript"></script>
	
	<script src="../../../../scripts/plugins/jquery.ui.js" class="view-source"  type="text/javascript" ></script>
	
	<script src="../jquery.combotree.js" type="text/javascript" class="view-source"></script>
	
	<script src="../../demo.js"></script>
	<link href="../../demo.css" rel="stylesheet">
	
<script  class="view-source noparse">
/* 数据格式：
[{"id":3,
"text":"Folder2",
"state":"open",
"iconCls":"icon-ok",
"children":[.....]*/

$(function(){
	$('#cc').comboTree({
		url:'../tree_data.json',
		treeHeight:200,
		onSelect:function(node){
			//node && alert(node.id+"  "+node.text);
		},
		onChange:function(oldValue,newValue){
			//alert(oldValue+"  "+newValue);
		}
	}) ;

	$('#getValue').click( function(){
		var obj = $('#cc').comboTree().getValue();
		$('.value').show().removeClass('ui-helper-hidden').html( jQuery.json.encode(obj) ) ;
	} ) ;
	
	$('#setValue').click( function(){
		$('#cc').comboTree().setValue({
			id:2,
			text:'File1'
		});
	} ) ;
	
	$('#reload').click( function(){
		$('#cc').comboTree().reload({url:"../tree_data2.json"});
	} ) ;

}) ;
</script>
	
	<style type="text/css">
		table,td{
			position:relative;z-index:0;
		}
	</style>
	
</head>

<body>

	
	<div  class="form-inline row-fluid " >
		<div class="row-fluid view-source control-group">
				<div class="span3">
	      			<a href='javascript:' id='getValue' class="btn">getValue</a> &nbsp;&nbsp;
					<a href='javascript:' id='setValue' class="btn">setValue</a> &nbsp;&nbsp;
					<a href='javascript:' id='reload' class="btn">reload</a>     &nbsp;&nbsp;
				</div>
				<div class="span3">
	      			<div class="value alert" style="display:none;"></div>
				</div>
	      	</div>
		
		<div class="row-fluid control-group">
      			<label class="control-label" for="agreement1">静态数据：</label>
	            <div class="controls" class="view-source">
	             	<select id="cc" class="easyui-combotree" style="width:200px;display:none;"></select>
	            </div>
	   </div>

	</div>
</body>
</html>